<template>
  <div class="content w-full">
    <div class="searchBox">
      <el-select v-model="searchFWZXID" @change="GetFWZList">
        <el-option
          v-for="item in searchInfoFWZX"
          :key="item.ID"
          :label="item.name"
          :value="item.ID"
        >
        </el-option>
      </el-select>
      <el-select v-model="searchFWZID" @change="ChangeFWZ">
        
        <el-option
          v-for="item in searchInfoFWZ"
          :key="item.ID"
          :label="item.name"
          :value="item.ID"
        >
        </el-option>
      </el-select>
    </div>
    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-6 h-full gap-2">
        <MainTitle class="row-span-1"></MainTitle>
        <div class="top grid grid-cols-3 gap-2 row-span-2">
          <div class="pl-4 h-full">
            <Number :title="`申请总数`" :data="data"></Number>
          </div>
          <div class="">
            <Number :title="`在职人数`" :data="data"></Number>
          </div>
          <!--          <div class="pr-4">-->
          <!--            <Number :title="`申请总数2`"></Number>-->
          <!--          </div>-->
          <div class="pr-4">
            <Percent :BarData="BarData"></Percent>
          </div>
        </div>
        <div class="bottom row-span-3 grid grid-cols-3 gap-2">
          <div class="pl-4 pb-6">
            <List :list="registrants_rank" :title="`注册人数排名`"></List>
          </div>
          <div class="pb-6">
            <List :list="served_rank" :title="`服务会员人数排名`"></List>
          </div>
          <div class="pr-4 pb-6">
            <List :list="excellent_rank" :title="`优秀健康管理师排名`"></List>
          </div>
        </div>
      </div>
    </BorderBox1>
  </div>
</template>
<script setup>
import {
  BorderBox1,
  BorderBox10,
  Decoration4,
  Decoration5,
  Decoration7,
  Decoration8,
  Decoration9
} from '@kjgl77/datav-vue3'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

import { getAllStewardData,getSteward } from '@/api/memberManager'
import MainTitle from '@/view/allHealthManager/components/mainTitle.vue'
import Number from '@/view/allHealthManager/components/number.vue'
import List from '@/view/allHealthManager/components/list.vue'
import Percent from '@/view/allHealthManager/model/percent.vue'
import {
  getServiceCenterList,
  getHealthManageCenterList,
} from '@/api/fdHealthManager'
const route = useRoute()

onMounted(() => {
  init()
})

const BarData = ref([])
const data = ref({})
const registrants_rank = ref([])
const served_rank = ref([])
const excellent_rank = ref([])
const searchFWZXID = ref('')
const searchFWZID = ref('')
const searchInfoFWZX = ref([
  { value: '1', label: '全部' },
  { value: '2', label: '服务中心1' },
  { value: '3', label: '服务中心2' }
])
const searchInfoFWZ = ref([
  { value:'0', label: '全部' },
  { value: '21', label: '服务站1' },
  { value: '31', label: '服务站2' }
])

const getOneOptions = async () => {
  const resOne = await getServiceCenterList()
  if (resOne.code === 0) {
    console.log(resOne.data)
    searchInfoFWZX.value = resOne.data
    var arr = searchInfoFWZX.value
    arr.splice(0, 0, {
      ID:'0',
      name: '全部'
    })
    searchInfoFWZX.value = arr
  }
}

getOneOptions()
const GetFWZList = async (ID) => {
  const resTwo = await getHealthManageCenterList({ ID: ID })
  console.log(resTwo)
  if (resTwo.code === 0) {
   
    searchInfoFWZ.value = resTwo.data
     var arr = searchInfoFWZ.value
       arr.splice(0, 0, {
      ID: '0',
      name: '全部'
    })
     searchInfoFWZ.value = arr
  }
}
const ChangeFWZX = async () => {
  console.log(searchFWZXID.value)
  getHealthManageCenterList({ ID: searchFWZXID.value })
}
const ChangeFWZ = async () => {
  console.log(searchFWZID.value)
  if(searchFWZID.value==='0'){
    searchFWZXID.value='0'
    init()
  }else{
    initOne(searchFWZID.value)
  }
}
const init = async () => {
  const res = await getAllStewardData()
  data.value = res.data
  BarData.value = data.value.level_proportion
  registrants_rank.value = data.value.registrants_rank
  served_rank.value = data.value.served_rank
  excellent_rank.value = data.value.excellent_rank
}
const initOne = async (ID) => {
  console.log(searchFWZID.value)
  const res = await getSteward({ id:ID })
  console.log(res)
  data.value = res.data
  BarData.value = data.value.level_proportion
 registrants_rank.value = data.value.registrants_rank.
 
  served_rank.value = data.value.served_rank
  excellent_rank.value = data.value.excellent_rank
}
</script>

<style scoped lang="scss">
.contents {
  font-size: 28px;
  text-shadow: 0 0 3px #7acaec;
}
.content {
  height: calc(100vh - 130px);
}
.searchBox {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  margin-top: 3vh;
}
.searchBox .el-select {
  margin-right: 5%;
}
</style>
